<template>
  <div class="idle_main">
    <v-header head-title="发布闲置" goBack="true" goods-publish="发布" @goodsPublish="addImage"></v-header>
    <publish @getValue="getValue" @getImage="getImage" :holder="holder"></publish>
    <div class="line"></div>
    <ul class="input_row">
      <li class="border-bottom">
        <span>物品名称：</span>
        <input type="text" placeholder="请输入物品名称" v-model="goodsTitle">
      </li>
      <li class="border-bottom">
        <span>物品金额：</span>
        <input type="tel" placeholder="请输入物品金额" v-model="goodsMoney">
      </li>
      <li class="border-bottom">
        <span>电话号码：</span>
        <input type="tel" placeholder="请输入电话号码" v-model="goodsPhone" maxlength="11">
      </li>
    </ul>
  </div>
</template>
<style lang="scss">
  .idle_main {
    width: 100%;
    padding-top: 40px;
    .line {
      width: 100%;
      height: 10px;
      background: #f2f2f2;
    }
    .input_row {
      li {
        margin: 0 10px;
        height: 48px;
        line-height: 48px;
        font-size: 14px;

        input{
          width: 65%;
          outline: none;
          border: none;
        font-size: 14px;

        }
      }
      /*li:last-child {*/
        /*border-bottom: none;*/
      /*}*/
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import qs from 'qs'
  import { Toast, Indicator } from 'mint-ui'
  import {
    loadVillageId,
    loadOpenId
  } from '../../common/js/cache.js'
  import commonUrl from '../../common/js/commonUrl.js'
  import publish from '../common/publish.vue'
  export default {
    name: 'PublishIdle',
    components: {
      'v-header': headTop,
      publish
    },
    props: {},
    data () {
      return {
        goodsContent: '',
        serverIds: [],
        goodsTitle: '',
        goodsMoney: '',
        goodsPhone: '',
        showLoading: false,
        holder: '请输入您要闲置物品的内容(字数不超过200)'
      }
    },
    computed: {},
    methods: {
      getValue (value) {
        this.goodsContent = value
      },
      getImage (image) {
        // this.imagesLrz = image
        this.serverIds = image
      },
      addImage () {
        setTimeout(function() {
          Indicator.close()
        }, 10000)
        if (!this.goodsContent.trim().length || !this.goodsContent || !this.serverIds.length || !this.goodsTitle || !this.goodsMoney) {
          Toast({
            message: '请填写完整信息',
            position: 'middle',
            duration: 2000
          })
          return
        }
        Indicator.open({
          text: '发布中...',
          spinnerType: 'fading-circle'
        })
        const url = `${commonUrl.apihost}index.php/home/goods/add`
        const data = {
          title: this.goodsTitle,
          content: this.goodsContent,
          money: this.goodsMoney,
          serverIds: this.serverIds,
          phone: this.goodsPhone,
          areas_id: loadVillageId(),
          openid: loadOpenId()
        }
        this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
          if (res.data.code === 200) {
            Indicator.close()
            Toast({
              message: '发布成功',
              position: 'middle',
              duration: 2000
            })
            history.replaceState({}, '', '/Home')
            this.$router.push('/home/Unused')
          }
          if (res.data.code === 400) {
            Indicator.close()
            Toast({
              message: '发布失败',
              position: 'middle',
              duration: 3000
            })
          }
          if (res.data.code === 401) {
            Indicator.close()
            Toast({
              message: '您的发表帖子已经触犯相关法律法规,暂时不能使用发帖和评论功能.',
              position: 'middle',
              duration: 3000
            })
          }
        })
      }
    }
  }
</script>
